<template>
  <div class="bady">
    <div class="cen left">
			
		</div>
		<div class="cen mid">
			
		</div>
		<div class="cen right">
			
    </div>
    <div class="flower">
      <img src="../assets/img/flower.png" alt="">
    </div>
    <div class="lemon">
      <img src="../assets/img/lemon(3).png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      timer: null
    }
  },
  created() {
    this.$store.state.footerNavShow = false

  },
  mounted () {
    this.timer = setTimeout(() => {
    this.$store.state.footerNavShow = true

      this.$router.push('/home')
    }, 3000)
  },
  beforeDestroy () {
    console.log('beforeDestroy')
    clearTimeout(this.timer)
  }
}
</script>

<style lang="scss" scoped>
.bady{
  width: 375px;
  height: 667px;
	background-color: #FFA5A5;
  position: relative;
		}
			.lemon{
        position: fixed;;
        bottom:180px;
        left: 50px;
      }
			.cen{
				width: 100px;
				height: 100px;
				background-color: #d5093c;
				box-shadow: 0px 0px 70px #d5093c;
				animation: 1s aj infinite;
			}
			
			.left{
				/*倒圆角 一个参数表示四个都要改，两个参数表示左上角和右下角要改，四个参数表示按顺时针4个都要改*/
				border-radius: 50px;
				position: absolute;
				top: 50px;
				left: 100px;
			}
			
			.mid{
				/*旋转角度*/
				transform: rotate(45deg);
				position: absolute;
				top: 83px;
				left: 133.5px;
			}
			
			.right{
				border-radius: 50px;
				position: absolute;
				top: 50px;
				left: 166.5px;
			}
			
			
			/*动画*/
			@keyframes aj{
				0%{transform: scale(1) rotate(45deg);}
				50%{transform: scale(1.1) rotate(45deg);}
				100%{transform: scale(1) rotate(45deg);}
			}

</style>
